this.image_map = new ol.layer.Tile({ name: “影像图层”, source: new ol.source.XYZ({ url: “http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=4b01c1b56c6bcba2eb9b8e987529c44f”//天地图影像（有高级别影像，云多，较暗） url:“http://mt1.google.cn/vt/lyrs=y&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali”//谷歌影像带标注 url:“http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}”//高德影像（风格清新，缺点无高级别影像） url:“http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}”//谷歌影像 }), visible: true, zIndex: 0 }); this.image_map = new ol.layer.Image({ name: “影像图层”, source: new ol.source.ImageArcGISRest({ url:“http://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer”,//arcgis在线世界影像(加载慢) }), visible: true, zIndex: 0 });

//如下是百度地图、影像和标注的加载 // 自定义分辨率和瓦片坐标系 var resolutions = []; var maxZoom = 18; var projection = ol.proj.get(“EPSG:3857”);//加载百度地图采用3857坐标系 // 计算百度使用的分辨率 for (var i = 0; i origin: [0, 0], // 设置原点坐标 resolutions: resolutions // 设置分辨率 }); // 百度街道 var baiduSource = new ol.source.TileImage({ projection: “EPSG:3857”, tileGrid: tilegrid, tileUrlFunction: function(tileCoord, pixelRatio, proj) { var z = tileCoord[0]; var x = tileCoord[1]; var y = tileCoord[2]; // 百度瓦片服务url将负数使用M前缀来标识 if (x < 0) { x = ‘M’ + (-x); } if (y < 0) { y = ‘M’ + (-y); } return ‘http://online’ + parseInt(Math.random() * 10) + ‘.map.bdimg.com/onlinelabel/?qt=tile&x=’ + x + ‘&y=’ + y + ‘&z=’ + z + ‘&styles=pl&udt=20170620&scaler=1&p=1’; } }); // 百度影像 var baiduSourceRaster= new ol.source.TileImage({ projection: “EPSG:3857”, tileGrid: tilegrid, tileUrlFunction: function(tileCoord, pixelRatio, proj) { var z = tileCoord[0]; var x = tileCoord[1]; var y = tileCoord[2]; // 百度瓦片服务url将负数使用M前缀来标识 if (x < 0) { x = ‘M’ + (-x); } if (y < 0) { y = ‘M’ + (-y); } return ‘http://shangetu’ + parseInt(Math.random() * 10) + ‘.map.bdimg.com/it/u=x=’ + x + ‘;y=’ + y + ‘;z=’ + z + ‘;v=009;type=sate&fm=46&udt=20170606’; } }); // 百度标注 var baiduSourceLabel = new ol.source.TileImage({ projection: “EPSG:3857”, tileGrid: tilegrid, tileUrlFunction: function(tileCoord, pixelRatio, proj) { var z = tileCoord[0]; var x = tileCoord[1]; var y = tileCoord[2]; // 百度瓦片服务url将负数使用M前缀来标识 if (x < 0) { x = ‘M’ + (-x); } if (y < 0) { y = ‘M’ + (-y); } return ‘http://online’ + parseInt(Math.random() * 10) + ‘.map.bdimg.com/onlinelabel/?qt=tile&x=’ + x + ‘&y=’ + y + ‘&z=’ + z + ‘&styles=sl&udt=20170620&scaler=1&p=1’; } }); this.image_map = new ol.layer.Tile({ title : “百度地图卫星服务”, source : baiduSourceRaster });

this.jiedao_map = new ol.layer.Tile({ name: “街道图层”, source: new ol.source.XYZ({ url: “http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=4b01c1b56c6bcba2eb9b8e987529c44f”//天地图街道 url:“http://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}”//高德街道 url:“http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}”//geoq(智图)街道 url:“http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}”//谷歌街道 }), visible: false, zIndex: 0 }); this.jiedao_map = new ol.layer.Image({ name: “街道图层”, source: new ol.source.ImageArcGISRest({ url:“http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer”,//geoq(智图)arcgis在线街道紫蓝色 }), visible: false, zIndex: 0 }); this.biaozhu_map = new ol.layer.Tile({ name: “标注”, source: new ol.source.XYZ({ url: “http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=4b01c1b56c6bcba2eb9b8e987529c44f”//天地图 }), visible: false, zIndex: 0 }); 学习参考地址：http://47.107.104.211:12307/examples/3dwebgl/examples.html#cs_layerAdd